import React, { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import autoHeight from '../autoHeight';
import styles from '../index.less';

@autoHeight()
class Area extends Component {
  render() {
    const { title, data, padding, height, position, scale = {}, forceFit = true } = this.props;

    return (
      <div className={styles.chart}>
        {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
        <Chart height={height} data={data} padding={padding} scale={scale} forceFit={forceFit}>
          <Tooltip crosshairs />
          <Axis />
          <Legend />
          <Geom type="area" position={position} color="type" shape="smooth" />
          <Geom type="line" position={position} color="type" shape="smooth" size={2} />
        </Chart>
      </div>
    );
  }
}

export default Area;
